<template>
  <div class="process-main">
    <div class="add_btn_top">
      <el-button class="button primary-button" size="mini" @click="handAdd"
        ><i class="el-icon-plus"></i>添加
      </el-button>
      <el-button class="button" size="mini">
        <svg-icon class="svg-icon" icon-class="import" />导入
      </el-button>
      <el-button class="button" size="mini">
        <svg-icon class="svg-icon" icon-class="import" />第三方系统集成
      </el-button>
      <el-button
        icon="el-icon-arrow-down"
        type="primary"
        size="mini"
        @click="handleAddSubmit"
        >发送</el-button
      >
      <div style="margin: 0 10px" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch class="screenSwitch" active-color="#2680D2" v-model="screen">
      </el-switch>
    </div>
    <el-container>
      <el-main style="padding: 0; background: #fff">
        <el-table
          ref="multipleTable"
          border
          :data="productionData"
          height="100px"
          v-adaptive
          style="width: 100%"
          row-key="id"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <div style="width: 100%">
                <el-table
                  max-height="500px"
                  min-height="100%"
                  border
                  v-if="
                    props.row.formula &&
                    props.row.formula.formulaParameter.length
                  "
                  size="mini"
                  :data="props.row.formula.formulaParameter[0].keys"
                  style="width: 74%"
                >
                  <el-table-column label="内容\名称" align="center">
                    <template slot-scope="scope">
                      {{ scope.row }}
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-for="(item, index) in props.row.formula.formulaParameter"
                    :key="index"
                    :label="'阶段' + (index + 1)"
                    align="center"
                  >
                    <template slot-scope="scope1">
                      {{ item.texts[scope1.$index] }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :reserve-selection="true"
            :selectable="selectable"
            align="center"
            type="selection"
          >
          </el-table-column>
          <el-table-column align="center" type="index" label="序号" width="60">
          </el-table-column>
          <template v-for="(item, index) in getColumnList">
            <template>
              <el-table-column
                :show-overflow-tooltip="true"
                :key="index"
                v-if="isTabShow(item.label)"
                :min-width="item.width"
                :prop="item.prop"
                :label="item.label"
                align="center"
                :type="item.type"
              >
                <template slot-scope="scope">
                  <span
                    v-if="
                      item.prop === 'token' &&
                      scope.row.token !== '00000000-0000-0000-0000-000000000000'
                    "
                    @click="checkDetails(scope.row.token)"
                    style="color: #409eff; cursor: pointer"
                    >{{ scope.row.token }}</span
                  >
                  <!-- <span
                    v-if="item.prop === 'materialAccountId'"
                    @click="checkMaterial(scope.row)"
                    style="color: #409eff; cursor: pointer"
                    >{{ scope.row.materialAccountId }}</span
                  > -->
                  <!-- item.prop !== 'materialAccountId' &&  -->
                  <span v-if="item.prop !== 'token'">{{
                    scope.row[item.prop]
                  }}</span>
                </template>
              </el-table-column>
            </template>
          </template>
          <el-table-column
            fixed="right"
            label="操作"
            width="120px"
            align="center"
          >
            <!-- eslint-disable-next-line -->
            <template slot="header" slot-scope="scope">
              <div class="flex-x flex-space" style="padding: 0 10px">
                <div>操作</div>
                <el-popover width="100" trigger="click">
                  <div class="column_search_box">
                    <div class="column_title">自定义表头字段</div>
                    <el-checkbox-group v-model="colCheckList">
                      <div class="flex-y column_search">
                        <el-checkbox
                          :label="item.label"
                          v-for="item in getColumnCheckList"
                          :key="item.label"
                        >
                          {{ item.label }}</el-checkbox
                        >
                      </div>
                    </el-checkbox-group>
                  </div>
                  <span slot="reference" class="el-icon-s-grid"></span>
                </el-popover>
              </div>
            </template>
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                icon="el-icon-edit-outline"
                @click="handEdit(scope.row.token)"
              ></el-button>
              <el-button
                type="text"
                size="mini"
                icon="el-icon-delete"
                @click="handDelete(scope.row.token)"
              ></el-button>
              <!-- <el-button size="small" @click="checkDetails(scope.row.token)"
                >详情</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page="pageNum"
          :limit="pageSize"
          :pageSizes="pageSizes"
        />
      </el-main>
      <el-aside
        style="background: #fff; padding: 10px; margin-left: 10px"
        width="18%"
        v-show="screen"
      >
        <Search
          :allData="allData"
          @setFilterList="setFilterList"
        ></Search></el-aside
    ></el-container>

    <AddDialog
      :addFlag="addFlag"
      :isedit="isedit"
      :title="title"
      :token="productionTaskToken"
      @closeDialog="closeDialog"
      ref="addDialogRef"
    ></AddDialog>
    <DetailsDialog
      :token="productionTaskToken"
      :showDialog.sync="showDialog"
    ></DetailsDialog>
    <MaterialDialog
      :token="materialToken"
      :showDialog.sync="materialShowDialog"
    ></MaterialDialog>
  </div>
</template>

<script>
import Pagination from "@/views/common/page";
import AddDialog from "./AddDialog.vue";
import { getTasks, delTasks, submitTask } from "@/api/productionTaskAccount";
import Search from "./searchFilter.vue";
import { TENANT_TITLE } from "@/utils/local";
// import RuleDialog from "./RuleDialog.vue";
import { getRules } from "@/api/productionRule";
import DetailsDialog from "./DetailsDialog.vue";
import MaterialDialog from "../materialAccount/components/DetailsDialog.vue";
import { currentDate } from "@/utils/currentDate";
const COLUMN_LIST = [
  // {
  //   label: "序号",
  //   prop: "",
  //   type: "index",
  //   width: "55px",
  //   hideCheck: true, //不进行筛选
  // },
  {
    label: "任务号",
    prop: "token",
    width: "90px",
  },
  // {
  //   label: "物料台账ID",
  //   prop: "materialAccountId",
  //   width: "125px",
  // },
  {
    label: "单位",
    prop: "unit",
    hideCheck: true,
    width: "55px",
  },
  {
    label: "加工区域",
    prop: "manufactureSite",
  },
  {
    label: "批次号",
    prop: "batchNumber",
  },
  {
    label: "零件号",
    prop: "partNumber",
  },
  {
    label: "零件名称",
    prop: "partName",
  },
  {
    label: "委托工序号",
    width: "105px",
    prop: "entrustProcessNumber",
  },
  {
    label: "工序/工步号",
    width: "105px",
    prop: "processNumber",
  },
  {
    label: "工序/工步名称",
    width: "105px",
    prop: "processName",
  },
  {
    label: "材料牌号",
    prop: "materialMark",
  },
  // {
  //   label: "工步名称",
  //   prop: "stepName",
  // },
  {
    label: "来件数量",
    prop: "partTotalCount",
  },
  {
    label: "状态",
    prop: "state",
  },
];
export default {
  components: {
    Pagination,
    AddDialog,
    Search,
    DetailsDialog,
    MaterialDialog,
    // RuleDialog,
  },

  data() {
    return {
      showDialog: false,
      screen: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      title: "物料任务",
      pageNum: 1,
      pageSize: 20,

      pageSizes: [20, 50, 100, 300],
      total: 0,
      addFlag: false,
      isedit: false,
      productionTaskToken: "",
      editmetaData: {},
      editmetaData: true,
      productionData: [],
      multipleSelection: [],
      colCheckList: COLUMN_LIST.map((item) => item.label),
      materialToken: "",
      materialShowDialog: false,
      allData: [],
      searchParams: {},
    };
  },
  computed: {
    getColumnCheckList() {
      return COLUMN_LIST.filter((item) => !item.hideCheck);
    },
    getColumnList() {
      return COLUMN_LIST;
    },
    isTabShow() {
      return function (name) {
        return this.colCheckList.includes(name);
      };
    },
    isCasting() {
      const { name } = this.$store.getters.tenant;
      return name == TENANT_TITLE[2];
    },
  },
  mounted() {
    this.getRulesOptions();
    this.getproductionTaskData();
    getTasks({
      page: 1,
      pageSize: 0,
    }).then((res) => {
      const r = res.data;
      this.allData = r.results;
    });
  },
  methods: {
    checkMaterial(row) {
      if (row.materialAccountId == "00000000-0000-0000-0000-000000000000") {
        return;
      }
      this.materialToken = row.materialAccountId;
      this.materialShowDialog = true;
    },
    checkDetails(token) {
      this.productionTaskToken = token;
      this.showDialog = true;
    },
    selectable(row) {
      return row.state === "物料";
    },
    getRulesOptions() {
      getRules({
        author: "",
        name: "",
        page: 1,
        pageSize: 0,
        state: "",
        token: "",
        version: "",
      }).then((res) => {
        this.rulesOptions = res.data.results;
      });
    },
    // submitForm() {},
    async handleAddSubmit() {
      if (this.multipleSelection.length) {
        this.$confirm(
          `当前选中 ${this.multipleSelection.length} 个任务,是否确认发送?`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            const taskIdList = this.multipleSelection.map((item) => item.id);
            const res = await submitTask({
              taskIdList,
              submitType: "生产",
              metadata: {},
              token: "",
            });

            this.$msg({
              type: "success",
              message: "发送成功",
            });
            this.$router.push({
              path: "/productionTask/receive-task/list",
            });
            // this.getproductionTaskData();
          })
          .catch((err) => {});
      } else {
        this.$msg("请选择物料收发台账");
      }
    },
    handleSelectionChange(rows) {
      this.multipleSelection = rows;
      // this.select_number = this.multipleSelection.length;
      // this.select_Id = [];
      // if (rows) {
      //   rows.forEach((row) => {
      //     if (row) {
      //       this.select_Id.push(row.id);
      //     }
      //   });
      // }
    },
    setFilterList(data) {
      if (data) {
        this.switchTextColor = "#2680D2";
        this.switchText = "显示筛选 ( 已筛选 )";
      } else {
        this.switchTextColor = "#666666";
        this.switchText = "显示筛选";
      }
      this.searchParams = data;
      this.getproductionTaskData();
    },
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getproductionTaskData();
    },
    indexMethod(index) {
      return index + 1;
    },
    //添加
    handAdd() {
      this.isedit = false;
      this.addFlag = true;
    },
    //编辑
    handEdit(token) {
      this.addFlag = true;
      this.isedit = true;
      this.productionTaskToken = token;
    },
    handDelete(token) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delTasks(token).then((res) => {
            this.$msg({
              type: "success",
              message: "操作成功!",
            });
            this.getproductionTaskData();
          });
        })
        .catch((c) => {});
    },
    //获取生产任务列表
    getproductionTaskData() {
      var params = {
        page: this.pageNum,
        includeFormula: true,
        pageSize: this.pageSize,
        ...this.searchParams,
        stateList:
          this.searchParams && this.searchParams.stateList
            ? this.searchParams.stateList
            : ["物料"],
        // startDate: data && data.startDate ? data.startDate : currentDate(),
      };
      getTasks(params).then((res) => {
        const r = res.data;
        this.total = r.numResults;
        this.productionData = r.results;
        this.multipleSelection = [];
        this.$nextTick(() => {
          this.$refs.multipleTable.clearSelection();
        });
      });
    },
    //关闭回调
    closeDialog(isRefresh) {
      // isRefresh是否刷新
      if (isRefresh) {
        this.getproductionTaskData();
      }
      this.addFlag = false;
    },
  },
};
</script>

<style lang='scss' scoped>
/* @import "~@/assets/style/processCss/baseStyle.css"; */
</style>
